<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站雏形</title>
    <link rel="stylesheet" href="./3.reset.css">
    <link rel="stylesheet" href="5.style.css">
    <style>
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        body{
            font-family: "Microsoft Yahei",sans-serif;
            font-size: 12px;
        }
        .top1{
            width: 1000px;
            height: 30px;
            margin: 0 auto;
            /*background: #bfa;*/
            line-height: 30px;
        }
        .top1>a{
            color: #000;
        }
        .top1>img{
            margin-top: 9px;
        }
        .collection{
            margin-left: 8px;
        }
        .star{
            margin-left: 5px;
        }
        .welcome>a{
            color: black;
        }
        .welcome{
            margin-right: 10px;
        }
        .logobar{
            width: 100%;
            height: 88px;
            background: rgb(246,45,43);
        }
        .logobar1{
            width: 1000px;
            height: 88px;
            margin:0 auto;
            background: rgb(246,45,43);
        }
        .logo{
            margin-top:12px;
            margin-left: 25px;
        }
        .search-box{
            height: 88px;
           line-height: 88px;
            margin-left: 180px;
        }
        .search-box1{
            width: 352px;
            height: 32px;
            border: none;
            margin-top: 28px;
        }
        .search-submit{
            width: 70px;
            height: 32px;
            background:rgb(255,140,0);
            border: none;
            margin-top: 28px;
            cursor: pointer;/*submit默认鼠标是箭头 指定为小手*/
            color: #FFFFFF;
        }
        .shopcar{
            background: rgb(255,140,0);
            width: 144px;
            height: 32px;
            margin-top: 28px;
            margin-right: 45px;
        }
        .shopcar-logo{
            width: 23px;
            height: 20px;
            margin-top: 6px;
            margin-left: 2px;
        }
        .shopcar1{
            height:32px;
            line-height: 32px;
            padding-left: 10px;
            color: #FFFFFF;
        }
        .number{
            height: 32px;
            line-height: 32px;
            margin-left: 10px;
        }
        .shopcar2{
            width: 10px;
            height: 10px;
            /*background: lime;*/
            margin-left:4px;
        }
        .shopcar200{
            /*background: crimson;*/
            border-left: 1px solid #ccc;
            width: 55px;
            height: 32px;
        }
        .shopcar100{
            /*border-right: 1px solid #999;*/
            width: 87px;
            height: 32px;
        }
        .nav{
            width: 100%;
            background: rgb(211,12,14);
            height:38px;
        }
        .nav2{
            width: 1000px;
            height: 38px;
            margin: 0 auto;
        }
        .nav2>li{
            display: inline-block;
            height: 38px;
            line-height: 38px;
            /*background: rgb(211,12,14);*/
            padding-left: 25px;
            padding-right: 30px;
            color: #FFFFFF;
        }
        .nav-left>img{
           margin-left: 30px;
            text-align: center;
        }
        .nav-middle{
            background:rgb(255,140,0);
            margin-left: 18px;
        }
        .banner{
            width: 1000px;
            height: 325px;
            margin: 0 auto;
            background: #bfa;
        }
        .banner1{
            width: 190px;
            height: 325px;
            background: red;
        }
        .banner20>li>a {
            color: white;
        }
        .banner20{
            margin-top: 13px;
            margin-left: 10px;
            margin-bottom: 13px;
        }
        .banner21-heyue{
            background: url("./images/circle.png");width: 50px;height: 22px;
        }
        .banner22{
            font-family: 宋体;
            font-size: 12px;
            margin-top:4px;
        }
        .showclass{
            margin-top: 20px;
            margin-right: 12px;
        }
        .banner21{
            font-family: "Microsoft Yahei",sans-serif;
            font-size: 14px;
        }
        .banner2>img{
            width: 810px;
            height: 325px;
        }
        .product1-top{
            width: 1000px;
            height: 72px;
            margin: 0 auto;
            /*background: #F56600;*/
        }
        .top-left{
            width:43px;
            height: 44px;
            margin-top:15px;
        }
        .家用电器{
            font-size:24px;
            height: 72px;
            line-height: 72px;
            margin-left: 15px;
        }
        .更多{
            font-family: 新宋体;
            font-size: 12px;
            height: 72px;
            line-height: 72px;
            margin-right:15px;
        }
        .product1-body{
            width: 1000px;
            height: 400px;
            /*background: #bbffaa;*/
            margin: 0 auto;
        }
        .product1-left-img{
            width: 190px;
            height: 400px;
            /*background: red;*/
            display:inline-block;
        }
        .product1-window{
            width: 810px;
            height: 400px;
            /*background: blue;*/
            display: inline-block;
        }
        .product1-big-window{
            width: 810px;
            height: 280px;
            /*background:#cccccc;*/
        }
        .product1-samll-window{
            width: 810px;
            height: 120px;
            /*background: lime;*/
        }
        .product1-big-window-part{
            width: 200.5px;
            height: 278px;
            /*background: deepskyblue;*/
            border: 1px solid #E5E5E5;
        }
        .product1-samll-window-part{
            width: 200.5px;
            height: 116px;
            /*background: #bbffaa;*/
            border: 1px solid #E5E5E5;
            border-bottom: 2px solid #FF7201;

        }
        .product1-left-img1{
            width: 190px;
            height: 400px;
        }
        .product1-big-window-part-img{
            width: 133px;
            height: 151px;
            margin-left: 33px;
            margin-top: 25px;
            margin-bottom: 25px;
        }
        .product1-big-window-descript{
            text-align: center;
            font-size: 16px;
            color: black;
        }
        .product1-big-window-price{
            text-align: center;
            font-size: 14px;
            color:#FF9844;
            margin-top: 5px;
        }

        .product1-samll-window-part>img{
            width: 39px;
            height: 76px;
          display: inline-block;
            margin-top: 25px;
            margin-left: 25px;
        }
        .product1-small-window-part-descript{
            /*display: inline-block;*/
            width: 98px;
            height: 30px;
            margin-top: 35px;
            margin-left: 15px;
            /*color: red;*/
            font-family: 新宋体;
            font-size: 12px;
        }
        .product1-small-window-part-price{
            margin-left: 15px;
            font-size: 16px;
        }
        #applescreen{
            width: 73px;
            height: 43px;
            margin-left: 10px;
            margin-top:35px;
        }
        .footer{
            width: 100%;
            background: #D4D4D4;
        }
        .footer1{
            width: 1000px;
            height: 220px;
            margin: 0 auto;
            /*background: #D4D4D4;*/
            margin-top: 35px;
        }
        .footer-charset{
            width: 1000px;
            height: 100px;
            /*background: blue;*/
        }
        .footer-img{
            width: 1000px;
            height: 120px;
            /*background: red;*/
        }
        .footer-charset-list1{
            /*background: #336699;*/
            text-align: center;
            padding-top: 54px;
        }
        .footer-charset-list2{
            /*background: #bbffaa;*/
            text-align: center;
        }
        .footer-img{
            text-align: center;
        }
        .footer-img>img{
            display: inline-block;
            padding-left: 10px;
        }
    </style>
</head>
<body>
<div class="top">
    <div class="top1">
        <img class="star left" src="./images/star.jpg" alt="顶部星星">
        <a  class="collection left" href="#">收藏猿代码</a>
        <span class="welcome right " >
            欢迎来到猿代码！
            <a href="#">[登录]</a>
            <a href="#">[免费注册]</a>
        </span>
    </div>
    <div class="logobar">
        <div class="logobar1">
                <img class="logo left" src="./images/logo.png" alt="LOGO标">
            <div class="left search-box">
                <input class="search-box1 left" type="text" name="搜索框" id="">
                <input class="search-submit left" type="submit" value="搜索">
            </div>
            <div class="shopcar right">
                <div class="shopcar100 left">
                    <img class="shopcar-logo left" src="./images/shopcar.jpg" alt="购物车">
                    <span class="shopcar1 left">购物车</span>
                </div>
                <div class="shopcar200 left">
                    <span class="number ">0</span>
                    <img  class="shopcar2" src="./images/icon.jpg" alt="购物车旁边的边框">
                </div>
            </div>
        </div>
    </div>
    <div class="nav">
        <ul class="nav2">
                <li class="nav-left">全部商品分类<img src="./images/sanjiao.png " width="11px" height="7px"></li>
                <li class="nav-middle">数码城</li>
                <li>天黑黑</li>
                <li>团购</li>
                <li>发现</li>
                <li>二手特卖</li>
                <li>名品会</li>
            </ul>
    </div>
</div>
<div class="banner">
    <div class="banner1 left">
        <ul class="banner10">
            <li class="banner11">
                <ul class="banner20 left">
                    <li class="banner21">
                        <a href="#">手机</a>
                        <a href="#">数码</a>
                        <a class="banner21-heyue" href="#">合约机</a>
                    </li>
                    <li class="banner22">
                        <a href="#">荣耀X</a>
                        <a href="#">单反</a>
                        <a href="#">智能设备</a>
                    </li>
                </ul>
                <ul class="right">
                    <li>
                        <img class="showclass" src="./images/showclass-jiantou.png" alt="展示箭头" width="5px" height="8px">
                    </li>
                </ul>
            </li><!--第2个-->
            <li class="banner11">
                <ul class="banner20 left">
                    <li class="banner21">
                        <a href="#">电脑</a>
                        <a href="#">硬件外设</a>
                        <a href="#">装机宝</a>
                    </li>
                    <li class="banner22">
                        <a href="#">笔记本</a>
                        <a href="#">台式机</a>
                        <a href="#">超级本</a>
                        <a href="#">平板</a>
                    </li>
                </ul>
                <ul class="right">
                    <li>
                        <img class="showclass" src="./images/showclass-jiantou.png" alt="展示箭头" width="5px" height="8px">
                    </li>
                </ul>
            </li><!--第3-->
            <li class="banner11">
                <ul class="banner20 left">
                    <li class="banner21">
                        <a href="#">大家电</a>
                    </li>
                    <li class="banner22">
                        <a href="#">电视</a>
                        <a href="#">空调</a>
                        <a href="#">冰箱</a>
                        <a href="#">洗衣机</a>
                    </li>
                </ul>
                <ul class="right">
                    <li>
                        <img class="showclass" src="./images/showclass-jiantou.png" alt="展示箭头" width="5px" height="8px">
                    </li>
                </ul>
            </li><!--第4-->
            <li class="banner11">
                <ul class="banner20 left">
                    <li class="banner21">
                        <a href="#">厨房电器</a>
                        <a href="#">生活电器</a>
                    </li>
                    <li class="banner22">
                        <a href="#">空气净化器</a>
                        <a href="#">微波炉</a>
                        <a href="#">取暖设备</a>
                    </li>
                </ul>
                <ul class="right">
                    <li>
                        <img class="showclass" src="./images/showclass-jiantou.png" alt="展示箭头" width="5px" height="8px">
                    </li>
                </ul>
            </li>
            <li class="banner11">
                <ul class="banner20 left">
                    <li class="banner21">
                        <a href="#">食品/饮料/生鲜</a>
                        <a href="#">粮油</a>
                    </li>
                    <li class="banner22">
                        <a href="#">进口</a>
                        <a href="#">方便面</a>
                        <a href="#">零食</a>
                        <a href="#">保健</a>
                    </li>
                </ul>
                <ul class="right">
                    <li>
                        <img class="showclass" src="./images/showclass-jiantou.png" alt="展示箭头" width="5px" height="8px">
                    </li>
                </ul>
            </li><!--第3-->
        </ul>
    </div>
    <div class="banner2 right">
        <img class="right" src="./images/banner01.jpg" alt="banneer广告图片">
    </div>
</div>
<div class="product1">
   <div class="product1-top">
       <img class="top-left left" src="./images/product-icon1.png" alt="家用电器前面的logo标">
        <span class="家用电器 left">家用电器</span>
        <span class="更多 right">更多>></span>
   </div>
   <div class="product1-body">
       <div class="product1-left-img left">
          <img class="product1-left-img1" src="./images/product-banner01.jpg" alt="">
       </div>
       <div class="product1-window left">
           <div class="product1-big-window">
               <div class="product1-big-window-part left">
                   <a href="#">
                       <img class="product1-big-window-part-img" src="./images/HTC.jpg" alt="">
                       <ul >
                       <li class="product1-big-window-descript">HTC新渴望8系列</li>
                       <li class="product1-big-window-price">1899元</li>
                   </ul>
                   </a><!--第1个-->
               </div>
               <div class="product1-big-window-part left">
                   <a href="#">
                       <img class="product1-big-window-part-img" src="./images/HTC.jpg" alt="">
                       <ul >
                           <li class="product1-big-window-descript">HTC新渴望8系列</li>
                           <li class="product1-big-window-price">2888元</li>
                       </ul>
                   </a><!--第2个-->
               </div>
               <div class="product1-big-window-part left">
                   <a href="#">
                       <img class="product1-big-window-part-img" src="./images/HTC.jpg" alt="">
                       <ul >
                           <li class="product1-big-window-descript">HTC新渴望8系列</li>
                           <li class="product1-big-window-price">2899元</li>
                       </ul>
                   </a><!--第3个-->
               </div>
               <div class="product1-big-window-part left">
                   <a href="#">
                       <img class="product1-big-window-part-img" src="./images/HTC.jpg" alt="">
                       <ul >
                           <li class="product1-big-window-descript">HTC新渴望8系列</li>
                           <li class="product1-big-window-price">2888元</li>
                       </ul>
                   </a><!--第4个-->
               </div>
           </div>
           <div class="product1-samll-window">
               <div class="product1-samll-window-part left">
                   <img class="left" src="./images/三星手机.png" alt="">
                   <ul class="product1-samll-window-part1 left ">
                       <li class="product1-small-window-part-descript" style="color: red">NFC技术一碰轻松配对！接触屏幕</li>
                       <li class="product1-small-window-part-price ">￥149.00</li>
                   </ul>
               </div>
               <div class="product1-samll-window-part left">
                   <img class="left" src="./images/三星手机.png" alt="">
                   <ul class="product1-samll-window-part1 left ">
                       <li class="product1-small-window-part-descript">Samsung三星G ALAXY Grand2</li>
                       <li class="product1-small-window-part-price ">￥2000.00</li>
                   </ul>
               </div>
               <div class="product1-samll-window-part left">
                   <img class="left" src="./images/4.ipad.png" alt="">
                   <ul class="product1-samll-window-part1 left ">
                       <li class="product1-small-window-part-descript">全网低价 Apple 苹果iPad mini1</li>
                       <li class="product1-small-window-part-price ">￥1888.00</li>
                   </ul>
               </div>
               <div class="product1-samll-window-part left">
                   <img class="left" src="./images/apple屏幕.png" alt="" id="applescreen">
                   <ul class="product1-samll-window-part1 left ">
                       <li class="product1-small-window-part-descript">Apple苹果 全新 Retina屏MacBoo</li>
                       <li class="product1-small-window-part-price ">￥20020.00</li>
                   </ul>
               </div>
           </div>
       </div>
   </div>
</div>
<div class="product2">
    <div class="product1-top">
        <img class="top-left left" src="./images/product-icon.jpg" alt="家用电器前面的logo标">
        <span class="家用电器 left">食品酒水</span>
        <span class="更多 right">更多>></span>
    </div>
    <div class="product1-body">
        <div class="product1-left-img left">
            <img class="product1-left-img1" src="./images/广告p.png" alt="左2广告图片">
        </div>
        <div class="product1-window left">
            <div class="product1-big-window">
                <div class="product1-big-window-part left">
                    <a href="#">
                        <img class="product1-big-window-part-img" src="./images/食品p.png" alt="">
                        <ul >
                            <li class="product1-big-window-descript">三月美食狂享购</li>
                            <li class="product1-big-window-price">50元</li>
                        </ul>
                    </a><!--第1个-->
                </div>
                <div class="product1-big-window-part left">
                    <a href="#">
                        <img class="product1-big-window-part-img" src="./images/食品p.png" alt="">
                        <ul >
                            <li class="product1-big-window-descript">三月美食狂享购</li>
                            <li class="product1-big-window-price">40元</li>
                        </ul>
                    </a><!--第2个-->
                </div>
                <div class="product1-big-window-part left">
                    <a href="#">
                        <img class="product1-big-window-part-img" src="./images/食品p.png" alt="">
                        <ul >
                            <li class="product1-big-window-descript">三月美食狂享购</li>
                            <li class="product1-big-window-price">20元</li>
                        </ul>
                    </a><!--第3个-->
                </div>
                <div class="product1-big-window-part left">
                    <a href="#">
                        <img class="product1-big-window-part-img" src="./images/食品p.png" alt="">
                        <ul >
                            <li class="product1-big-window-descript">三月美食狂享购</li>
                            <li class="product1-big-window-price">80元</li>
                        </ul>
                    </a><!--第4个-->
                </div>
            </div>
            <div class="product1-samll-window">
                <div class="product1-samll-window-part left">
                    <img class="left" src="./images/康比特p.png" alt="">
                    <ul class="product1-samll-window-part1 left ">
                        <li class="product1-small-window-part-descript" style="color: red">康比特 维他保咀 嚼片 60片</li>
                        <li class="product1-small-window-part-price ">￥60.00</li>
                    </ul>
                </div>
                <div class="product1-samll-window-part left">
                    <img class="left" src="./images/康比特p.png" alt="">
                    <ul class="product1-samll-window-part1 left ">
                        <li class="product1-small-window-part-descript">康比特 维他保咀 嚼片</li>
                        <li class="product1-small-window-part-price ">￥40.00</li>
                    </ul>
                </div>
                <div class="product1-samll-window-part left">
                    <img class="left" src="./images/康比特p.png"alt="">
                    <ul class="product1-samll-window-part1 left ">
                        <li class="product1-small-window-part-descript">康比特 维他保咀 嚼片</li>
                        <li class="product1-small-window-part-price ">￥20.00</li>
                    </ul>
                </div>
                <div class="product1-samll-window-part left">
                    <img class="left" src="./images/康比特p.png"alt="" id="产品小图">
                    <ul class="product1-samll-window-part1 left ">
                        <li class="product1-small-window-part-descript">康比特 维他保咀 嚼片</li>
                        <li class="product1-small-window-part-price ">￥10.00</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer1">
        <div class="footer-charset">
            <ul>
                <li class="footer-charset-list1" >猿代码简介|猿代码公告| 招纳贤士| 联系我们|客服热线：400-700-1307</li>
                <li class="footer-charset-list2">Copyright © 2006 - 2016 猿代码版权所有   沪ICP备09037834号   沪ICP证B1034-8373号   上海市市公安局宝山分局备案编号：123456789123</li>
            </ul>
        </div>
        <div class="footer-img">
            <img src="./images/authentication.png" alt="">
            <img src="./images/authentication.png" alt="">
            <img src="./images/authentication.png" alt="">
            <img src="./images/authentication.png" alt="">
        </div>
    </div>
</div>
</body>
</html>